Day21 Geolocation based Speedometer and Compass

在第21天的實作目標要做出一個指南針和時速表的網站。

恩 我在實作時發現網頁中取得經緯度，其他數值都無法取得。

在手機的網頁中取得值也只有經緯度，其他數值都無法取得。

所以此篇放棄就這樣吧。

騙你們的，首先透過geolocation來建立持續的定位watchPosition()的狀態，來取得目標值，定位值有7個數值，而heading是代表偏離北方的角度，因此該數值可以代表指南針，透過取得heading來控制旋轉角度transform:roatate()，這樣即可做到指南針。但實作時電腦取得值為null，手機也為null。

const arrow = document.querySelector('.arrow');
arrow.style.transform = `rotate(${data.coords.heading}deg)`;

接下來是速度speed，也是透過watchPosition()來取得速度，但電腦和手機一樣無法取得值。

const speed = document.querySelector('.speed-value');
speed.textContent = data.coords.speed;

唯二取得值為latitude、longitude經緯度。因此將經緯度顯示出來。

Html

  <h1 class="speed">
    <span class="speed-value">0</span>
    <span class="units">KM/H</span>
  </h1>

Javascript

1. Navigator
   Navigator 介面標示了用戶代理（user agent）的狀態與身份。它允許腳本查詢與註冊，以進行一些活動。

2. Navigator.geolocation
   Geolocation 介面代表一個物件可以透過你的網頁程式去獲得你的裝置位置。這個介面提供了網站或應用程式根據使用者的位置去客製化呈現的內容。

3. Geolocation.watchPosition()
   Geolocation.watchPosition() 這個方法是用來註冊一個處理的函式，當使用者的裝置位置更新時，這個函式所傳入的回呼函式(callback function) 就會自動被呼叫。你也可以選擇性的定義錯誤時哪些錯誤回呼函式(error callback function) 需要被呼叫。

4. Coordinates
   Coordinates 這個介面用來存取裝置的經緯度，速度以及這些數值的準確度。

   1. Coordinates.latitude : 回傳一個十進位的 double 代表緯度。
   2. Coordinates.longitude : 回傳一個十進位的 double 代表經度。
   3. Coordinates.altitude : 回傳一個 double 代表距離海平面的高度，單位為公尺。如果無法提供這個值則回傳 null。
   4. Coordinates.accuracy : 回傳一個 double 代表經緯度的精準值，單位為公尺。
   5. Coordinates.altitudeAccuracy : 回傳一個 double 代表高度的精準度，單位為公尺。如果無法提供這個值則回傳 null。
   6. Coordinates.heading : 回傳一個 double 代表裝置前進的方向，這個數值代表你偏離北方多少度，0度代表你向著正北方，照著順時針的方向遞增(90度代表正東方，270度代表正西方) 。如果速度值為0度，則此值為 NaN。如果無法提供這個值則回傳 null。
   7. Coordinates.speed : 回傳一個 double 代表速度，單位為公尺/秒。如果無法提供這個值則回傳 null。

CSS

1. radial-gradient()
   放射形漸層[1]

tags: Navigator